<template>
    <a-form :form="form">
        <a-card>
            <a-row type="flex" align="middle">
                <#list queryObj?keys as key>
                <a-col span="${queryNum}">
                    <a-form-item
                            label="${queryObj["${key}"]}"
                            :label-col="{span:8}"
                            :wrapper-col="{span:16}"
                    >
                        <a-input
                                v-decorator="['${key}']"
                                allowClear
                                size="small"
                        />
                    </a-form-item>
                </a-col>
                </#list>
                <a-col span="${queryNum}">
                    <a-space style="float: right">
                        <a-button
                                type="primary"
                                @click="handleQuery"
                        >
                            查询
                        </a-button>
                        <a-button
                                type="danger"
                                @click="form.resetFields()"
                        >
                            清空
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-card>
    </a-form>
</template>

<script>
  import {mapActions, mapMutations, mapState} from 'vuex'

  export default {
    name: "${indexNameUpper}Head",
    data() {
      return {
        form: this.$form.createForm(this),
      }
    },
    computed: {
      ...mapState('${indexName}', ['queryForm'])
    },
    methods: {
      ...mapMutations('${indexName}', ['setState']),
      ...mapActions('${indexName}', ['query']),
      handleQuery() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.setState({name: 'tableLoading', value: true})
            this.setState({name: 'queryForm', value: {...this.queryForm, ...values}})
            this.query()
          }
        })
      }
    }
  }
</script>

<style scoped>
    /deep/ .ant-form-item {
        margin-bottom: 0px
    }
</style>